@use "design-system";

.onboarding-app-header {
  position: relative;
  z-index: design-system.$onboarding-app-header-z-index;
  flex-flow: column nowrap;
  flex: 0 0 auto;

  &__banner-tip {
    &-container {
      @include design-system.screen-lg-max {
        display: none;
      }
    }

    border-radius: 20px;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: design-system.$onboarding-app-header-z-index;

    &-icon {
      margin-bottom: -4px;
    }
  }


  &--welcome {
    background-color: transparent;
  }

  @include design-system.screen-sm-max {
    z-index: design-system.$mobile-header-z-index;
  }

  @include design-system.screen-sm-min {
    height: 75px;
    justify-content: center;
  }

  &__metafox-logo {
    &--icon {
      height: 32px;

      @include design-system.screen-sm-min {
        display: none;
      }
    }

    &--horizontal {
      width: 63px;

      @include design-system.screen-sm-max {
        display: none;
      }
    }
  }

  &__dropdown {
    cursor: pointer;

    .dropdown__select {
      cursor: pointer;
    }
  }

  // SRP_OVERRIDE: dropdown on welcome banner page
  &__dropdown--welcome--banner {
    .dropdown__select {
      border: 0;
      background-color: var(--color-accent03-dark);
      color: var(--color-accent03-light);
    }

    .dropdown__icon-caret-down {
      color: var(--color-accent03-light);
    }
  }

  // SRP_OVERRIDE: dropdown on welcome banner page
  &__dropdown--welcome--login {
    .dropdown__select {
      border: 0;
      background-color: black;
      color: white;

      @media (prefers-color-scheme: dark) {
        background-color: var(--color-accent02-light);
        color: var(--color-accent02-dark);
      }
    }

    .dropdown__icon-caret-down {
      color: white;

      @media (prefers-color-scheme: dark) {
        color: var(--color-accent02-dark);
      }
    }
  }

  &__contents {
    flex-flow: row nowrap;
    max-width: 1280px;

    @include design-system.screen-sm-max {
      height: 100%;
    }
  }

  &__logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 1rem;
  }
}
